<template>
  <a-card title="答题卡">
    <p>
      <span>
        <a-tag color="blue">{{ questionType[question.type] }}</a-tag>
        {{ questionId + 1 }}.
      </span>
      <span v-html="question.title"></span>
    </p>
    <pre v-html="question.content"></pre>
    <a-divider />
    <!-- 单选 -->
    <a-radio-group
      v-if="question.type == 1 || question.type == 3"
      :value="answer"
      @change="$emit('onAnswerChange', $event.target.value)"
    >
      <template v-for="(item, index) in JSON.parse(question.options)" :key="index">
        <a-radio :style="radioStyle" :value="item.option"> {{ item.option }} - {{ item.content }} </a-radio>
      </template>
    </a-radio-group>
    <!-- 多选 -->
    <a-checkbox-group v-if="question.type == 2" :value="answer" @change="$emit('onAnswerChange', $event)">
      <template v-for="(item, index) in JSON.parse(question.options)" :key="index">
        <a-checkbox :style="radioStyle" :value="item.option"> {{ item.option }} - {{ item.content }} </a-checkbox>
      </template>
    </a-checkbox-group>
    <br />
    <br />
    <a-button-group>
      <a-button @click="$emit('onChangeQuestion', -1)">上一题</a-button>
      <a-button @click="$emit('onChangeQuestion', 1)"> 下一题</a-button>
    </a-button-group>
  </a-card>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    question: Object,
    questionId: Number,
    answer: [Object, String],
  },
  setup() {
    const questionType = ["", "单选题", "多选题", "判断题"];

    return {
      questionType,
      radioStyle: {
        display: "block",
        lineHeight: "30px",
        marginLeft: "0px",
      },
    };
  },
});
</script>
